/* li {
  position: relative;
  /* width: 100px;
  height: 30px;
  background-color: rgba(100, 163, 200, 0.3);
  margin-bottom: 30px; 
} */
/* 给a设置宽高百分百，就会撑满 li，这样鼠标经过 li 的时候，就会变为小手 */
li > a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.h4 {
  position: relative;
}
.none {
  width: 400px;
  height: 424px;
  padding: 19px 24px 11px 16px;
  box-sizing: border-box;
  background: whitesmoke;
  position: absolute;
  left: 230px;
  top: 0;
  z-index: 3;
  display: none; /*这里把 none 里面的内容隐藏起来*/
  border-radius: 0 10px 10px 0;
}

/* 这里设置li鼠标移过的时候，如果里面有none这个类，才会触发里面的样式 */
li:hover .none {
  display: block; /*这里把 none 里面的内容显示出来*/
}
.none h1 {
  margin-bottom: 10px;
  font-weight: normal;
  font-size: 20px;
}
.none div {
  color: green;
  font-size: 12px;
  letter-spacing: 3px;
  margin: 10px 0;
}
.none span {
  font-size: 12px;
  color: black;
}
